import React, {useEffect, useState} from 'react';
import {View, Text, TouchableOpacity, Image, ScrollView} from 'react-native';
import {useNavigation} from '@react-navigation/native';
import AreaView from '../../components/Layout/AreaView';
import BaseUrl from '../../config/BaseUrl';
import {
  getQuestionDetail,
  aswQuestionList,
  beginAswPaper,
  aswQuestion,
} from '../../service/common';
import styles from './style';
import {Toast} from '@ant-design/react-native';

let aswQuestions = []; // 每道题的答题
let aqId = ''; // 题目id
let rightCount = 0; // 答对的题目数

const SimulationTraining = (props) => {
  const {
    route: {
      params: {epId},
    },
  } = props;

  const navigation = useNavigation();
  const [apId, setApId] = useState('');
  const [data, setData] = useState({});
  let [paperTotal, setPaperTotal] = useState(0); // 试卷题目总数
  let [paperTh, setPaperTh] = useState(1); // 试卷当前第几道题
  const [exmQstAnswers, setExmQstAnswers] = useState([]);
  const [currentIndex, setCurrentIndex] = useState();
  const [ques, setQues] = useState();
  useEffect(() => {
    navigation.setOptions({
      title: '题库详情页',
      // headerRight: () => (
      //   <View style={styles.head_right}>
      //     <Image
      //       style={styles.star_icon}
      //       source={require('../../assets/images/simulation/star_selected.png')}
      //     />
      //   </View>
      // ),
    });
    navigation.addListener('focus', () => {
      aswQuestions = []; // 每道题的答题
      aqId = ''; // 题目id
      rightCount = 0; // 答对的题目数
      // 开始答题
      beginAswPaper({epId}).then((res) => {
        console.log(res, 'beginAswPaper');
        if (res.code === 500) {
          Toast.fail(res.msg);
          navigation.goBack();
        } else {
          setApId(res.data.apId);
          getQuestionDetailQuest(res.data.apId, 1);
        }
      });
    });
  }, [navigation]);

  const getQuestionDetailQuest = (apId, pn) => {
    setQues();
    setCurrentIndex();
    aswQuestionList({apId, pn, ps: 1}).then((res) => {
      console.log(res, 'aswQuestionList');
      aqId = res.rows[0].aqId;
      setPaperTotal(res.total);
      setPaperTh(res.rows[0].eqOrder);
      setData({...res.rows[0]});
      setExmQstAnswers([...res.rows[0].exmQstAnswers]);
    });
  };
  const submitques = (item) => {
    console.log(item, 'submitques');
    aswQuestions.push({
      aqId,
      aqOption: item.eqaOption,
    });
    // aqOption = item.eqaOption;
    aswQuestion({
      apId: data.apId,
      aqId: data.aqId,
      aqOption: item.eqaOption,
    }).then((res) => {
      console.log(res);
      if (res.data.aqIsTrue === 'Y'){
        console.log('Yes');
        rightCount++;
      }
      setQues(res.data);
    });
  };
  console.log(exmQstAnswers);
  return (
    <AreaView>
      <View style={styles.container}>
        {/* <View style={styles.list}>
          <Text style={styles.list_title}>目录</Text>
          <TouchableOpacity  activeOpacity={1} activeOpacity={1}>
            <Text style={[styles.list_text, styles.selected_text]}>第一题</Text>
          </TouchableOpacity>
          <TouchableOpacity  activeOpacity={1} activeOpacity={1}>
            <Text style={[styles.list_text]}>第一题</Text>
          </TouchableOpacity>
        </View> */}
        <ScrollView style={styles.ques_container}>
          <View style={styles.ques}>
            <Text style={styles.ques_text}>{data?.eqTile}</Text>
          </View>
          {data?.eqImage && (
            <Image
              style={styles.list_img}
              source={{uri: BaseUrl.imgurl + data?.eqImage}}
            />
          )}
          <View style={styles.answer}>
            {exmQstAnswers?.map((item, index) => (
              <TouchableOpacity
                style={styles.answer_btn_list}
                activeOpacity={1}
                key={item + index}
                onPress={() => {
                  submitques(item);
                  setCurrentIndex(index);
                }}>
                <View
                  style={[
                    styles.answer_list,
                    currentIndex === index && (ques?.eqOption !== item.eqaOption ? styles.wrong_answer_list : styles.selected_answer_list),
                    // ques?.eqOption === item.eqaOption && styles.wrong_answer_list
                  ]}>
                  <Text
                    style={[
                      styles.left,
                      currentIndex === index && (ques?.eqOption !== item.eqaOption ? styles.wrong_left : styles.selected_left),
                      // ques?.eqOption === item.eqaOption && styles.wrong_left
                    ]}>
                    {item.eqaOption}
                  </Text>
                  <View
                    style={[
                      styles.line,
                      currentIndex === index && (ques?.eqOption !== item.eqaOption ? styles.wrong_line : styles.selected_line),
                      // ques?.eqOption === item.eqaOption && styles.wrong_line
                    ]}
                  />
                  <Text
                    style={[
                      styles.right,
                      currentIndex === index && (ques?.eqOption !== item.eqaOption ? styles.wrong_right : styles.selected_right),
                      // ques?.eqOption === item.eqaOption && styles.wrong_right
                    ]}>
                    {item.eqaTitle}
                  </Text>
                </View>
              </TouchableOpacity>
            ))}
          </View>
          {ques && (
            <View style={styles.ques_answer}>
              <Text style={styles.ques_answer_text1}>
                正确答案 {ques?.eqOption}
              </Text>
              <Text style={styles.ques_answer_text2}>题目解析</Text>
              <Text style={styles.ques_answer_text3}>{ques?.eqAnalysis}</Text>
            </View>
          )}

          <View style={styles.btn_container}>
            <TouchableOpacity
              onPress={() => {
                if (paperTh > 1){
                  console.log('prev');
                  // setAnswer();
                  getQuestionDetailQuest(apId, paperTh - 1);
                } else {
                  Toast.info('当前是第一题');
                }
              }}>
              <View
                style={[
                  styles.full_screen_submit,
                  paperTh > 1 ? '' : styles.full_screen_submit_gray,
                ]}>
                <Text style={styles.submit_text}>上一题</Text>
              </View>
            </TouchableOpacity>

            <TouchableOpacity
              onPress={() => {
                if (paperTh < paperTotal){
                  // setAnswer();
                  getQuestionDetailQuest(apId, paperTh + 1);
                } else {
                  Toast.info('已经是最后一题了');
                }
              }}>
              <View
                style={[
                  styles.full_screen_submit,
                  paperTh < paperTotal ? '' : styles.full_screen_submit_gray,
                ]}>
                <Text style={styles.submit_text}>下一题</Text>
              </View>
            </TouchableOpacity>

            <TouchableOpacity
              onPress={() => {
                navigation.push('AnswerReport', {
                  apId,
                  epTitle: data.epTitle,
                  rightCount,
                  aswQuestions,
                });
              }}>
              <View style={[styles.full_screen_submit, styles.submit_red]}>
                <Text style={styles.submit_text}>提交考试</Text>
              </View>
            </TouchableOpacity>
          </View>
        </ScrollView>
      </View>
    </AreaView>
  );
};

export default SimulationTraining;
